<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚筒调试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        .first, .second, .third, .fourth {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .second div, .third div {
            display: inline-block;
            width: calc(33.33% - 10px);
            margin-right: 10px;
            vertical-align: top;
        }
        .second div:last-child, .third div:last-child {
            margin-right: 0;
        }
        input[type="text"], select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        #forwardCommand, #reverseCommand {
            background-color: #f9f9f9;
            color: #333;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <!-- 第一行 -->
    <div class="first">
        <div>
            <h1>端口号选择</h1>
            <select name="port" id="port">
                <option value="COM1">COM1</option>
                <option value="COM2">COM2</option>
                <option value="COM3">COM3</option>
                <option value="COM4">COM4</option>
                <option value="COM5">COM5</option>
                <option value="COM6">COM6</option>
                <option value="COM7">COM7</option>
                <option value="COM8">COM8</option>
                <option value="COM9">COM9</option>
                <option value="COM10">COM10</option>
            </select>
        </div>
    </div>

    <!-- 第二行 -->
    <div class="second">
        <div>
            <h1>小车号</h1>
            <input type="text" name="carNumber" id="carNumber">
        </div>
        <div>
            <h1>速度</h1>
            <input type="text" name="speed" id="speed">
        </div>
        <div>
            <h1>时间</h1>
            <input type="text" name="time" id="time">
        </div>
        <div>
            <h1>加速度</h1>
            <input type="text" name="acceleration" id="acceleration">
        </div>
        <div>
            <h1>延迟</h1>
            <input type="text" name="delay" id="delay">
        </div>
        <div>
            <h1>方向</h1>
            <select name="direction" id="direction">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
    </div>

    <!-- 第三行 -->
    <div class="third">
        <div>
            <h1>正转指令</h1>
            <input type="text" name="forwardCommand" id="forwardCommand">
        </div>
        <div>
            <h1>反转指令</h1>
            <input type="text" name="reverseCommand" id="reverseCommand">
        </div>
    </div>

    <!-- 第四行 -->
    <div class="fourth">
        <button type="button" id="generateCommand">生成指令</button>
        <button type="button" id="debugButton">点击调试</button>
        <!-- <button type="button" id="displayButton" onclick="window.location.href='http://localhost:3001/test'">点击返回展示页面</button> -->
    </div>

    <script>
        let socket;
        fetch('http://localhost:3001/configs')
            .then(response => response.json())
            .then(data => {
                // document.getElementById('serialPort').value = data.configs.serialPort;
                // document.getElementById('baudRate').value = data.configs.baudRate;
                // document.getElementById('carNumber').value = data.onePointFour.car_id;
                document.getElementById('speed').value = data.onePointFour.speed;
                document.getElementById('time').value = data.onePointFour.time;
                document.getElementById('acceleration').value = data.onePointFour.acceleration;
                document.getElementById('delay').value = data.onePointFour.delay;
            })
            .catch(error => {
                console.error('Error:', error);
            });    
        function connectWebSocket() {
            socket = new WebSocket('ws://127.0.0.1:3000');

            socket.onopen = function() {
                console.log('WebSocket connection established');
            };

            socket.onerror = function(error) {
                console.error('WebSocket error:', error);
            };

            socket.onclose = function() {
                console.log('WebSocket connection closed');
            };
        }

        function generate_command(car_id, speed, time, direction, acceleration, delay) {  
            // 参数设定起始符号  
            const byte1 = 0x95;  
          
            // 方向、小车编号  
            const byte2 = (direction << 6) | (car_id & 0x3F);  
          
            // 运行速度  
            const byte3 = speed & 0x7F;  
          
            // 延迟运行时间低 7 位  
            const byte4 = delay & 0x7F;  
          
            // 运行时间/运行步数  
            const byte5 = time & 0x7F;  
          
            // 复合数据 1  
            const byte6 = 0x00; // 假设为0  
          
            // 复合数据 2  
            const byte7 = acceleration & 0x7F;  
          
            // 计算校验符  
            const checksum = byte2 ^ byte3 ^ byte4 ^ byte5 ^ byte6 ^ byte7;  
          
            // 前8个字节的数组  
            const front_bytes = [byte1, byte2, byte3, byte4, byte5, byte6, byte7, checksum];  
          
            // 后8位的计算逻辑  
            let back_bytes = [];  
            switch (car_id) {  
                case 1:  
                    back_bytes = [0x8A, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01];  
                    break;  
                case 2:  
                    back_bytes = [0x8A, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02];  
                    break;  
                case 3:  
                    back_bytes = [0x8A, 0x04, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04];  
                    break;  
                case 4:  
                    back_bytes = [0x8A, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x08];  
                    break;  
                case 5:  
                    back_bytes = [0x8A, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10];  
                    break;  
                default:  
                    back_bytes = [0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00]; // 默认值  
            }  
          
            // 返回完整的16个字节的数组  
            return front_bytes.concat(back_bytes);  
        };

        document.getElementById('generateCommand').addEventListener('click', function() {
            const carNumber = parseInt(document.getElementById('carNumber').value);
            const speed = parseInt(document.getElementById('speed').value);
            const time = parseInt(document.getElementById('time').value);
            const acceleration = parseInt(document.getElementById('acceleration').value);
            const delay = parseInt(document.getElementById('delay').value);
            const direction = parseInt(document.getElementById('direction').value);
            
            const command = generate_command(carNumber, speed, time, direction, acceleration, delay);
            if (direction === 0) {
                document.getElementById('forwardCommand').value = command.map(byte => byte.toString(16).padStart(2, '0')).join(' ');
            } else {
                document.getElementById('reverseCommand').value = command.map(byte => byte.toString(16).padStart(2, '0')).join(' ');
            }
        });

        document.getElementById('debugButton').addEventListener('click', function() {
            const forwardCommand = document.getElementById('forwardCommand').value;
            const reverseCommand = document.getElementById('reverseCommand').value;
            const direction = parseInt(document.getElementById('direction').value);
            const port = document.getElementById('port').value;
            if (direction === 0 && forwardCommand) {
                console.log({type:'guntong',value:forwardCommand,port:port});
                socket.send(JSON.stringify({type:'guntong',value:forwardCommand,port:port}));
            } else if (direction === 1 && reverseCommand) {
                // socket.send(reverseCommand);
                socket.send(JSON.stringify({type:'guntong',value:reverseCommand,port:port}));
            }
        });

        document.getElementById('forwardCommand').readOnly = true;
        document.getElementById('reverseCommand').readOnly = true;

        connectWebSocket();
    </script>
</body>
</html>